<template>
  <el-dialog v-model="isShowRoadNetManage"
             :direction="direction"
             draggable
             top="80px"
             :modal="false"
             style="position: absolute;left: 105px;width:18%;">
    <template #title>
      <h2>路网管理</h2>
    </template>
    <template #default>
      <div>
        <el-radio v-model="bikeTraceDateRadio" label='gj20201221' size="large"
        >厦门市路网</el-radio>
      </div>
    </template>

    <template #footer>
      <div style="flex: border-box">
        <el-button @click="hideRoadNet">显示/隐藏</el-button>
        <el-button type="primary" @click="getxmRoadData">获取数据</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import "../pages/Map.vue";
import { ref, reactive, toRefs} from 'vue'
import store from "../store/index.js";
import axios from "axios";
import Point from "ol/geom/Point"
import WKT from "ol/format/WKT";
import { Fill, Stroke, Style, Text , Circle, Icon} from "ol/style";
import {Cluster,Vector as VectorSource} from 'ol/source';
import {Vector as VectorLayer} from 'ol/layer';
import { showLoading, hideLoading } from '../store/loading.js'
import Feature from 'ol/feature';
import View from 'ol/View';
import {getCurrentInstance} from 'vue';

const isShowRoadNetManage = ref(false)

const direction = ref('rtl')
const bikeTraceDateRadio = ref('gj20201221')
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure you want to close this?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}


//TopMenu通过Home.vue传值
export interface ExposeType {
  getIsShowRoadNetMsg:Function
}
//将TopMenu中的isshowBikeTrace值传入
const  getIsShowRoadNetMsg = (val:boolean) => {
  isShowRoadNetManage.value = val
  console.log('val2',val)
}
//将值暴露
defineExpose({
  getIsShowRoadNetMsg
})

//道路轨迹可视化
//初始化厦门road Vector&source
const xmRoadVector=ref(null)
const xmRoadSource=ref(null)
const roadFeatureCube=ref([])
const isGetRoadNetData=ref(false)
//控制路网图层显示与隐藏
const isShowRoad=ref(true)
xmRoadSource.value=new VectorSource({})
xmRoadVector.value = new VectorLayer({
  name:'道路网 ',
  source: xmRoadSource.value,
  style: new Style({
    stroke: new Stroke({
      color: '#b57c00',
      width: 4,
      /*lineDash: [10, 8]*/
    })
  })
})
//显示/隐藏路网图层
const hideRoadNet=()=>{
  if(isShowRoad.value){
    //隐藏
    xmRoadVector.value.setVisible(false)
    isShowRoad.value=!isShowRoad.value
  }else{
    //显示
    xmRoadVector.value.setVisible(true)
    isShowRoad.value=!isShowRoad.value
  }
}
//获取后台路网数据
const getxmRoadData=()=> {
  //展示Loading
  showLoading()
  axios.get(store.state.dbApi + '/xmRoad').then(result => {
    //清空变量/初始化变量
    let getData = [];
    if(isGetRoadNetData.value)
    {//已获取数据，清空变量
      xmRoadSource.value.clear()
      roadFeatureCube.value=[]
    }else{//还未获取数据，加入图层，初始化图层
      store.state.map.addLayer(xmRoadVector.value)
      store.state.checkDiyLayerList.push(xmRoadVector.value.get('name'))
    }
    getData = result.data
    console.log(getData)
    //获取数据库数据并通过WKT转换放入图层
    for (let i = 0; i < getData.length; i++) {
      roadFeatureCube.value.push(new WKT().readFeature(getData[i]['multiline']))
    }
    isGetRoadNetData.value=true
    //隐藏Loading
    hideLoading()
    //将线级加载到图源中
    xmRoadSource.value.addFeatures( roadFeatureCube.value)
  })
}


</script>
